<template>
  <div
    class="livePage"
    :style="{
      transform: 'scale(1)',
    }"
  >
    <div :class="show ? 'settingBox' : ''" :style="boxImgUrl"></div>
    <div class="poster" v-if="postShow"></div>
    <div class="prizePoster" v-if="postShow">
      <div class="prizePosterImg" :style="posterImgUrl">
        <div class="goodsImg" v-if="type != 2" :style="goodsImgUrl"></div>
        <div class="goodName" v-if="type != 2" :style="goodNameColor">
          {{ type | goodsName }}
        </div>
      </div>
      <div class="acceptBtn" @click="closePoster">
        {{ type != 2 ? "收下它" : "再来一次" }}
      </div>
    </div>
    <div class="header_wrap">
      <h1 class="my-header">盲盒抽奖</h1>
    </div>
    <div class="container">
      <div class="banner">
        <img class="bannerImg" :src="bannerUrl" alt="" />
        <div class="prizeTop">
          <h3 class="pageTitle" :style="activeNameStyle">
            {{ pageJson.activetyName }}
          </h3>
          <div class="desc" v-if="pageJson.activetyDesc">
            <span class="pageDesc" :style="activeDescStyle">{{
              pageJson.activetyDesc
            }}</span>
          </div>
          <div class="reduceTime" v-if="pageJson.residueNum">
            <span class="reducetext" :style="residueStyle"
              >剩余0次抽奖机会</span
            >
          </div>
          <div class="btns">
            <div
              class="shareBtnImg"
              v-if="pageJson.shareBtnshow"
              :style="shareBtnUrl"
            ></div>
            <div
              class="shareBtnText"
              v-if="pageJson.shareBtnshow"
              :style="sharebtnStyle"
            >
              {{ pageJson.shareBtnText }}
            </div>
            <div
              class="goShopBtnImg"
              v-if="pageJson.goShopBtnShow"
              :style="goShopBtnUrl"
            ></div>
            <div
              class="goShopBtnText"
              v-if="pageJson.goShopBtnShow"
              :style="goShopbtnStyle"
            >
              {{ pageJson.goShopBtnText }}
            </div>
          </div>
          <div class="boxList">
            <div class="boxTop" :style="boxType_Padding">
              <div
                class="boxItem"
                v-for="(item, index) in boxList"
                :key="index"
                v-show="index + 1 <= pageJson.BoxNum"
              >
                <div class="boxImg" :style="boxImgUrl"></div>
                <div class="boxTitle" :style="boxTitleStyle">
                  {{ pageJson.boxList[index] }}
                </div>
              </div>
            </div>

            <!-- 盲盒下部分 -->
            <div class="boxBottom">
              <div
                class="prizePool"
                v-if="pageJson.giftPoolShow"
                :style="poolStyle"
              >
                <div class="poolTitle" :style="giftPoolNameStyle">
                  {{ pageJson.giftPoolName }}
                </div>
                <div
                  class="prizeCarousel"
                  v-if="pageJson.prizeCarousel"
                  :style="prizeCarouselStyle"
                >
                  恭喜 陈*寻抽中了 50积分
                </div>
                <div class="poolList">
                  <div class="prizeItem">
                    <div class="prizeImg"></div>
                    <div class="prizeName">奖品一</div>
                  </div>
                  <div class="prizeItem">
                    <div
                      class="prizeImg"
                      :style="{
                        background: `url(${require('@/assets/images/product/choujiang_jiangpin_youhuiquan.png')}) no-repeat 50% 50%/cover`,
                      }"
                    ></div>
                    <div class="prizeName">奖品二</div>
                  </div>
                  <div class="prizeItem">
                    <div
                      class="prizeImg"
                      :style="{
                        background: `url(${require('@/assets/images/product/xiezi.png')}) no-repeat 50% 50%/cover`,
                      }"
                    ></div>
                    <div class="prizeName">奖品三</div>
                  </div>
                  <div class="prizeItem">
                    <div class="prizeImg"></div>
                    <div class="prizeName">奖品四</div>
                  </div>
                  <div class="prizeItem">
                    <div
                      class="prizeImg"
                      :style="{
                        background: `url(${require('@/assets/images/product/choujiang_jiangpin_youhuiquan.png')}) no-repeat 50% 50%/cover`,
                      }"
                    ></div>
                    <div class="prizeName">奖品五</div>
                  </div>
                  <div class="prizeItem">
                    <div class="prizeImg"></div>
                    <div class="prizeName">奖品六</div>
                  </div>
                </div>
              </div>
              <div
                class="myPrize"
                v-if="pageJson.myPrizeShow"
                :style="myPrizeContainStyle"
              >
                <div class="myPrizeTitle" :style="myPrizeStyle">
                  {{ pageJson.myPrizeName }}
                </div>
                <div class="myPrizeList">
                  <div class="Item">
                    <div class="left">
                      <div class="mpName">奖品一</div>
                      <div class="mpTime">2021/08/20 13:51:12</div>
                    </div>
                    <div
                      class="right"
                      :style="myPrizeBtnStyle"
                      v-if="pageJson.myPrizeBtnShow"
                    >
                      {{ pageJson.myPrizeBtnName }}
                    </div>
                  </div>
                  <div class="Item">
                    <div class="left">
                      <div class="mpName">奖品一</div>
                      <div class="mpTime">2021/08/20 13:51:12</div>
                    </div>
                    <div
                      class="right"
                      :style="myPrizeBtnStyle"
                      v-if="pageJson.myPrizeBtnShow"
                    >
                      {{ pageJson.myPrizeBtnName }}
                    </div>
                  </div>
                  <div class="Item">
                    <div class="left">
                      <div class="mpName">奖品一</div>
                      <div class="mpTime">2021/08/20 13:51:12</div>
                    </div>
                    <div
                      class="right"
                      :style="myPrizeBtnStyle"
                      v-if="pageJson.myPrizeBtnShow"
                    >
                      {{ pageJson.myPrizeBtnName }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="activetyRule"
                v-if="pageJson.activetyRuleShow"
                :style="ruleStyle"
              >
                <div class="ruleTitle" :style="ruleTitleStyle" @click="abc">
                  {{ pageJson.activetyRuleText }}
                </div>
                <div class="ruleText" :style="ruleTextStyle" v-html="activeRuleText">
                  {{ activeRuleText }}
                </div>
              </div>
              <div
                class="getChange"
                v-if="pageJson.drawBtnShow"
                :style="getChangebtnStyle"
              >
                {{ pageJson.drawBtnText }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "livePage",
  props: {
    pageJson: {
      type: Object,
    },
  },
  filters: {
    goodsName(item) {
      switch (item) {
        case 1:
          return "运动鞋";
        case 2:
          return "";
        case 3:
          return "10积分";
        case 4:
          return "7折券";
        default:
          return "";
      }
    },
  },
  computed: {
    goodNameColor() {
      let color = "#fff";
      if (this.type == 1) {
        color = this.pageJson.winningPrizeColor;
      } else if (this.type == 3) {
        color = this.pageJson.integralColor;
      } else if (this.type == 4) {
        color = this.pageJson.couponColor;
      }
      return {
        color: color,
      };
    },
    bannerUrl() {
      let url;
      if (
        this.pageJson.styleType == 2 &&
        this.pageJson.bannerType == 2 &&
        this.pageJson.bannerImageUrl
      ) {
        url = this.pageJson.bannerImageUrl;
      } else {
        url = require("@/assets/images/product/choujiang_bg.png");
      }
      return url;
    },
    shareBtnUrl() {
      let url;
      if (
        this.pageJson.styleType == 2 &&
        this.pageJson.sharebtnType == 2 &&
        this.pageJson.shareImageUrl
      ) {
        url = `url(${this.pageJson.shareImageUrl}) no-repeat 50% 50% /cover`;
      } else {
        url = `url(${require("@/assets/images/product/choujing_icon_gaosuhaoyou.png")}) no-repeat 50% 50% /cover`;
      }
      return {
        background: url,
      };
    },
    sharebtnStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.shareBtnColor,
          fontSize: this.pageJson.sharefontSize + "px",
          fontWeight: this.pageJson.sharefontWeight,
        };
    },
    goShopBtnUrl() {
      let url;
      if (
        this.pageJson.styleType == 2 &&
        this.pageJson.goShopbtnType == 2 &&
        this.pageJson.goShopImageUrl
      ) {
        url = `url(${this.pageJson.goShopImageUrl}) no-repeat 50% 50% /cover`;
      } else {
        url = `url(${require("@/assets/images/product/choujing_icon_jindianguanguang.png")}) no-repeat 50% 50% /cover`;
      }
      return {
        background: url,
      };
    },
    goShopbtnStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.goShopBtnColor,
          fontSize: this.pageJson.goShopfontSize + "px",
          fontWeight: this.pageJson.goShopfontWeight,
        };
    },
    activeNameStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.activetyNameColor,
          fontSize: this.pageJson.activetyNamefontSize + "px",
          fontWeight: this.pageJson.activetyNamefontWeight,
        };
    },
    activeDescStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.activetyDescColor,
          fontSize: this.pageJson.activetyDescfontSize + "px",
          fontWeight: this.pageJson.activetyDescfontWeight,
          background: this.pageJson.activetyDescBordercolor,
          borderRadius:
            this.pageJson.activetyDescAngelType == 0 ? "0" : "5555px",
        };
    },
    residueStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.residueNumColor,
          fontSize: this.pageJson.residueNumfontSize + "px",
          fontWeight: this.pageJson.residueNumfontWeight,
          background: this.pageJson.residueNumBordercolor,
          borderRadius: this.pageJson.residueNumAngelType == 0 ? "0" : "5555px",
        };
    },
    boxImgUrl() {
      let url;
      if (
        this.pageJson.styleType == 2 &&
        this.pageJson.BoxStyleType == 2 &&
        this.pageJson.BoxImgUrl
      ) {
        url = `url(${this.pageJson.BoxImgUrl}) no-repeat 50% 50% /cover`;
      } else {
        url = `url(${require("@/assets/images/product/choujiang_manghe.png")}) no-repeat 50% 50% /cover`;
      }
      return {
        background: url,
      };
    },
    boxType_Padding() {
      let pad;
      if (this.pageJson.BoxNum == 4) {
        pad = 57;
      } else {
        pad = 16;
      }
      return {
        padding: `0 ${pad}px`,
      };
    },
    boxTitleStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.BoxColor,
          fontSize: this.pageJson.BoxfontSize + "px",
          fontWeight: this.pageJson.BoxfontWeight,
          background: this.pageJson.BoxBordercolor,
          borderRadius: this.pageJson.BoxAngelType == 0 ? "0" : "5555px",
        };
    },
    giftPoolNameStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.giftPoolColor,
          fontSize: this.pageJson.giftPoolfontSize + "px",
          fontWeight: this.pageJson.giftPoolfontWeight,
          background: this.pageJson.poolTitleColor,
          borderRadius: this.pageJson.poolAngelType == 0 ? "0" : "5555px",
        };
    },
    poolStyle() {
      if (this.pageJson.styleType == 2)
        return {
          background: this.pageJson.poolTextColor,
          borderRadius: this.pageJson.pooltextAngelType == 0 ? "0" : "10px",
        };
    },
    prizeCarouselStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.prizeColor,
          fontSize: this.pageJson.prizefontSize + "px",
          fontWeight: this.pageJson.prizefontWeight,
          background: this.pageJson.prizeBordercolor,
          borderRadius: this.pageJson.prizeAngelType == 0 ? "0" : "5555px",
        };
    },
    myPrizeStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.awardColor,
          fontSize: this.pageJson.awardfontSize + "px",
          fontWeight: this.pageJson.awardfontWeight,
          background: this.pageJson.awardTitleColor,
          borderRadius: this.pageJson.awardAngelType == 0 ? "0" : "5555px",
        };
    },
    myPrizeBtnStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.awardBtnColor,
          fontSize: this.pageJson.awardfontBtnSize + "px",
          fontWeight: this.pageJson.awardfontBtnWeight,
          background: this.pageJson.awardTitleBtnColor,
          borderRadius: this.pageJson.awardAngelBtnType == 0 ? "0" : "5555px",
        };
    },
    myPrizeContainStyle() {
      if (this.pageJson.styleType == 2)
        return {
          background: this.pageJson.awardTextColor,
          borderRadius: this.pageJson.awardTextAngelType == 0 ? "0" : "10px",
        };
    },
    ruleTitleStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.ruleTitleColor,
          fontSize: this.pageJson.ruleTitlefontSize + "px",
          fontWeight: this.pageJson.ruleTitlefontWeight,
          background: this.pageJson.ruleTitlebgColor,
          borderRadius: this.pageJson.ruleTitleAngelType == 0 ? "0" : "5555px",
        };
    },
    ruleTextStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.ruleTextColor,
          fontSize: this.pageJson.ruleTextfontSize + "px",
          fontWeight: this.pageJson.ruleTextfontWeight,
          lineHeight:
            this.pageJson.ruleTextfontSize + 5 < 20
              ? "20px"
              : this.pageJson.ruleTextfontSize + 5 + "px",
        };
    },
    ruleStyle() {
      if (this.pageJson.styleType == 2)
        return {
          background: this.pageJson.ruleTextbgColor,
          borderRadius: this.pageJson.ruleTextAngelType == 0 ? "0" : "10px",
        };
    },
    getChangebtnStyle() {
      if (this.pageJson.styleType == 2)
        return {
          color: this.pageJson.drawtColor,
          fontSize: this.pageJson.drawfontSize + "px",
          fontWeight: this.pageJson.drawfontWeight,
          background: this.pageJson.drawbgColor,
          borderRadius: this.pageJson.drawAngelType == 0 ? "0" : "5555px",
        };
    },
    posterImgUrl() {
      let url;
      if (this.type == 2) {
        if (this.pageJson.noWinningType == 2 && this.pageJson.noWinningImgUrl) {
          url = `url(${this.pageJson.noWinningImgUrl}) no-repeat 50% 50% /cover`;
        } else {
          url = `url(${require("@/assets/images/product/choujiang_Popup_weizhongjiang.png")}) no-repeat 50% 50% /cover`;
        }
      } else {
        if (
          this.pageJson.winningPrizeType == 2 &&
          this.pageJson.winningPrizeImgUrl
        ) {
          url = `url(${this.pageJson.winningPrizeImgUrl}) no-repeat 50% 50% /cover`;
        } else {
          url = `url(${require("@/assets/images/product/choujiang_Popup_zhongjiang.png")}) no-repeat 50% 50% /cover`;
        }
      }
      return {
        background: url,
      };
    },
    goodsImgUrl() {
      let url;
      if (this.type == 3) {
        if (this.pageJson.integralType == 2 && this.pageJson.integralImgUrl) {
          url = `url(${this.pageJson.integralImgUrl}) no-repeat 50% 50% /cover`;
        } else {
          url = `url(${require("@/assets/images/product/choujiang_jiangpin_jifen.png")}) no-repeat 50% 50% /cover`;
        }
      } else if (this.type == 4) {
        if (this.pageJson.couponType == 2 && this.pageJson.couponImgUrl) {
          url = `url(${this.pageJson.couponImgUrl}) no-repeat 50% 50% /cover`;
        } else {
          url = `url(${require("@/assets/images/product/choujiang_jiangpin_youhuiquan.png")}) no-repeat 50% 50% /cover`;
        }
      }
      return {
        background: url,
      };
    },
    //处理文本域换行空格问题
    activeRuleText() {
      let text = this.pageJson.activetyRuleDesc.replace(/\n/g, "<br>");
      text = text.replace(new RegExp(" ", "gm"), "&nbsp;");
      console.log(this.pageJson);
      text = text.replace(
        new RegExp(" ", "gm"),
        "&nbsp;"
      ); // gm 全局替换
      const arr = [];
      text.split("\n").forEach((item) => {
        arr.push(`<p>${item.trim()}</p>`);
      });
      text = arr.join("");
      return text;
    },
  },
  data() {
    return {
      boxList: [
        { boxText: "盲盒1" },
        { boxText: "盲盒2" },
        { boxText: "盲盒3" },
        { boxText: "盲盒4" },
        { boxText: "盲盒5" },
        { boxText: "盲盒6" },
        { boxText: "盲盒7" },
        { boxText: "盲盒8" },
        { boxText: "盲盒9" },
      ], //盲盒文案
      show: false,
      postShow: false,
      type: 1,
    };
  },
  methods: {
    go(type) {
      this.type = type;
      this.postShow = false;
      this.show = true;
      let timer = setTimeout(() => {
        this.show = false;
        clearTimeout(timer);
        this.postShow = true;
      }, 2500);
    },
    closePoster() {
      this.postShow = false;
    },
    abc() {
      console.log(this.pageJson.activetyRuleDesc, "00000000");
      console.log(this.pageJson);
    },
  },
};
</script>
<style scoped lang="less">
.livePage {
  width: 375px;
  height: calc(100vh - 109px);
  //   height: 100%;
  background: #1d1c2a;
  position: relative;
  .poster {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 444;
  }
  // overflow-x: visible;
  // overflow-y: scroll;
  //   overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  .header_wrap {
    background: url("~@images/shop/top.png") no-repeat center center / cover;
    height: 64px;
    width: 385px;
    position: relative;
    flex-shrink: 0;
    z-index: 5555;
    .my-header {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      font-weight: 700;
      color: #191919;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 0;

      // width: 100%;
      // height: 40px;
      // line-height: 40px;
      // text-align: center;
    }
  }
  .container {
    overflow: auto;
    flex-grow: 1;
    // background: url("~@images/product/choujiang_bg.png") no-repeat 50% 50% /
    //   cover;

    .banner {
      position: relative;
      .bannerImg {
        width: 100%;
      }
      .prizeTop {
        width: 100%;
        height: 100%;
        // position: relative;
        position: absolute;
        top: 0;
        left: 0;
        .pageTitle {
          text-align: center;
          font-size: 40px;
          font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
          font-weight: 800;
          color: #ffffff;
          text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.28);
          margin-top: 38px;
        }
        .desc {
          margin-top: 15px;
          display: flex;
          justify-content: center;
          .pageDesc {
            display: inline-block;
            text-align: center;
            padding: 8px 16px;
            box-sizing: border-box;
            background: #cfa56d;
            border-radius: 115151px;
            // height: 30px;
            // line-height: 15px;
            min-width: 100px;
            font-size: 14px;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #ffffff;
          }
        }
        .reduceTime {
          margin-top: 10px;
          display: flex;
          justify-content: center;
          .reducetext {
            display: inline-block;
            text-align: center;
            padding: 4px 24px;
            box-sizing: border-box;
            background: #383838;
            opacity: 0.5;
            // height: 20px;
            // line-height: 10px;
            min-width: 80px;
            font-size: 12px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #bfbfbf;
          }
        }
        .btns {
          position: absolute;
          top: 19px;
          right: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .shareBtnImg,
          .goShopBtnImg {
            width: 50px;
            height: 50px;
            background: url("~@images/product/choujing_icon_gaosuhaoyou.png")
              no-repeat 50% 50% / cover;
          }
          .shareBtnText,
          .goShopBtnText {
            // width: 100%;
            // padding-right: 8px;
            text-align: center;
            font-size: 8px;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            white-space: nowrap;
            color: #ffffff;
          }
          .goShopBtnImg {
            margin-top: 8px;
            background: url("~@images/product/choujing_icon_jindianguanguang.png")
              no-repeat 50% 50% / cover;
          }
        }
        .boxList {
          position: absolute;
          top: 210px;
          width: 100%;
          left: 0;
          .boxTop {
            width: 100%;
            padding: 0 16px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
          }
          .boxItem {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 111px;
            padding-bottom: 12px;
            .boxImg {
              width: 111px;
              height: 111px;
              background: url("~@images/product/choujiang_manghe.png") no-repeat
                50% 50% / cover;
            }
            .boxTitle {
              height: 34px;
              line-height: 14px;
              background: #383767;
              border-radius: 151515515px;
              font-size: 14px;
              font-family: SourceHanSansCN-Bold, SourceHanSansCN;
              font-weight: bold;
              color: #ffffff;
              padding: 10px;
              margin-top: 20px;
            }
          }
        }
        .boxBottom {
          margin-top: 40px;
          width: 100%;
          padding: 0px 15px 37px;
          .prizePool,
          .myPrize,
          .activetyRule {
            background: #3d3d4e;
            border-radius: 10px;
            min-height: 100px;
            // overflow: hidden;
            // overflow: scroll;
            overflow: inherit;
            .poolTitle,
            .myPrizeTitle,
            .ruleTitle {
              width: 180px;
              height: 40px;
              background: #c0a27b;
              border-radius: 20px;
              font-size: 16px;
              font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
              font-weight: 800;
              color: #ffffff;
              line-height: 40px;
              text-align: center;
              margin: auto;
              transform: translateY(-50%);
            }
            .prizeCarousel {
              width: 300px;
              height: 32px;
              margin: auto;
              line-height: 32px;
              text-align: center;
              background: #c8505c;
              font-size: 14px;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #ffffff;
              margin-top: -7px;
            }
            .poolList {
              margin-top: 20px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              padding: 0 10px;
              .prizeItem {
                width: 105px;
                flex-shrink: 0;
                padding-bottom: 15px;
                .prizeImg {
                  width: 105px;
                  height: 105px;
                  background: url("~@images/product/choujiang_jiangpin_jifen.png")
                    no-repeat 50% 50% / cover;
                  border-radius: 7px;
                }
                .prizeName {
                  width: 100%;
                  text-align: center;
                  font-size: 14px;
                  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                  font-weight: 400;
                  color: #ffffff;
                  margin-top: 10px;
                }
              }
            }
            .poolList::after {
              width: 105px;
              content: "";
            }
          }
          .myPrize {
            margin-top: 40px;
            .myPrizeList {
              margin-top: 5px;
              width: 100%;
              padding: 0 15px 30px;
              .Item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                  .mpName {
                    font-size: 14px;
                    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                    font-weight: bold;
                    color: #ffffff;
                  }
                  .mpTime {
                    font-size: 12px;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #b3b3b3;
                    margin-top: 5px;
                  }
                }
                .right {
                  min-width: 84px;
                  height: 30px;
                  background: #676596;
                  border-radius: 16px;
                  line-height: 30px;
                  text-align: center;
                  font-size: 14px;
                  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                  font-weight: 400;
                  color: #ffffff;
                  padding: 0 10px;
                }
              }
              .Item + .Item {
                margin-top: 23px;
              }
            }
          }
          .activetyRule {
            margin-top: 40px;
            .ruleText {
              padding: 0 15px 20px;
              font-size: 14px;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #ffffff;
              line-height: 20px;
              margin-top: -5px;
              word-wrap: break-word;
            }
          }
          .getChange {
            width: 345px;
            height: 50px;
            background: #c8505c;
            border-radius: 25px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0px 1px 3px rgba(98, 25, 25, 0.5);
            margin-top: 35px;
          }
        }
      }
    }
  }
}
.prizePoster {
  width: 100%;
  position: absolute;
  top: 20%;
  // left: 25px;
  z-index: 5555555;
  .prizePosterImg {
    margin: auto;
    width: 331px;
    height: 314px;
    padding: 181px 113px 0;
    background: url("~@images/product/choujiang_Popup_zhongjiang.png") no-repeat
      50% 50% / cover;
    .goodsImg {
      width: 105px;
      height: 105px;
      background: url("~@images/product/xiezi.png") no-repeat 50% 50% / cover;
      border-radius: 7px;
    }
    .goodName {
      margin-top: 4px;
      font-size: 14px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
    }
  }
  .acceptBtn {
    cursor: pointer;
    margin: auto;
    margin-top: 15px;
    width: 193px;
    height: 63px;
    background: url("~@images/product/choujiang_popup_btn.png") no-repeat 50%
      50% / cover;
    font-size: 16px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #dd6262;
    text-align: center;
    line-height: 63px;
  }
}
.settingBox {
  width: 120px;
  height: 120px;
  background: url("~@images/product/choujiang_manghe.png") no-repeat 50% 50% /
    cover;
  position: absolute;
  top: 0;
  left: 133px;
  z-index: 5555555;
}
@keyframes settingBox {
  0% {
    -webkit-transform: scale(0.5);
    top: 0px;
  }
  15% {
    -webkit-transform: scale(0.7);
    top: 30%;
  }
  30% {
    -webkit-transform: scale(1.2);
    top: 70%;
    -webkit-transform: translate(5px, 5px);
  }
  40% {
    transform: translate(-5px, -5px);
    top: 70%;
  }
  50% {
    transform: translate(0px, 0px);
    top: 70%;
  }
  60% {
    transform: translate(5px, -5px);
    top: 70%;
  }
  70% {
    transform: translate(-5px, 5px);
    top: 70%;
  }
  80% {
    transform: translate(0px, 0px);
    top: 70%;
  }
  90% {
    transform: translate(5px, 5px);
    top: 70%;
  }
  100% {
    transform: translate(-5px, -5px);
    top: 70%;
  }
}
.settingBox {
  // -webkit-animation: settingBox 0.5s ;
  animation: settingBox 2.5s linear forwards;
}
</style>